<template>
  <!--系统主体tab切换-->
  <main class="site-content">
    <!--主入口标签页 e -->

    <div class="el-card-div">
      <!-- <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive> -->
      <!-- 为了子系统可以刷新 v-if="!$route.meta.keepAlive" -->
      <router-view></router-view>
    </div>
  </main>
</template>

<script>
import { getData } from '@/service/getData'; // 统一接口请求方法
export default {
  components: {},
  data() {
    return {
      trigger: 'click',
      visible: false,
      levelArr: ['一级报警', '二级报警', '三级报警'],
      dialogVisible: false,
      alarmInfo: {},
      noticeTotal: 0,
      noticeList: [],
      alarmTotal: 0,
      alarmList: [],
      runningMessgae: {},
    };
  },
  computed: {
    // 网页在浏览器中可见高度，不包括状态栏
    documentClientHeight: {
      get() {
        return this.$store.state.tabsDataISIM.documentClientHeight;
      },
    },

    // 当前选择的菜单
    menuActiveName: {
      get() {
        return this.$store.state.tabsDataISIM.menuActiveName;
      },
      set(val) {
        this.$store.commit('tabsDataISIM/updateMenuActiveName', val);
      },
    },

    // 将已经点击过的路由名称, 更新到mainTabs数组
    mainTabs: {
      get() {
        return this.$store.state.tabsDataISIM.mainTabs;
      },
      set(val) {
        this.$store.commit('tabsDataISIM/updateMainTabs', val);
      },
    },

    // 当前选择的菜单名字
    mainTabsActiveName: {
      get() {
        return this.$store.state.tabsDataISIM.mainTabsActiveName;
      },
      set(val) {
        this.$store.commit('tabsDataISIM/updateMainTabsActiveName', val);
      },
    },

    // 计算tab下面div路由进来的高度
    siteContentViewHeight() {
      var height = this.documentClientHeight - 50 - 30 - 2;
      // if (this.$route.meta.isTab) {
      //   height -= 40
      //   return { minHeight: height + 'px' }
      // }
      return { minHeight: height + 'px' };
    },
    isHidden() {
      if (this.noticeTotal == 0 && this.alarmTotal == 0) {
        return true;
      }
      return false;
    },
    isDot() {
      if (this.alarmTotal == 0 && this.noticeTotal > 0) {
        return true;
      }
      return false;
    },
  },
  created() {},
  destroyed() {
    if (this.infoTimer) {
      clearInterval(this.infoTimer);
    }
  },
  methods: {
    // tabs, 选中tab
    selectedTabHandle(tab) {
      // debugger
      // tab = this.mainTabs.filter((item) => item.name === tab.name);
      if (tab.length >= 1) {
        this.$router.push({ name: tab[0].name });
        // this.$router.push({ name: tab[0].name})
      }
    },

    // tabs, 删除tab
    removeTabHandle(tabName) {
      let tabTemp = this.mainTabs.filter((item) => item.name !== tabName);
      if (tabTemp.length == 0) {
        return;
      }
      this.mainTabs = tabTemp;
      console.log(this.mainTabs.length);
      if (this.mainTabs.length >= 0) {
        // 当前选中tab被删除
        if (tabName === this.mainTabsActiveName) {
          var tab = this.mainTabs[this.mainTabs.length - 1];
          this.$router.push({ name: tab.name }, () => {
            this.mainTabsActiveName = this.$route.name;
          });
        }
      } else {
        // this.$router.push({ name: '健康中心' })
      }
    },

    // tabs, 关闭当前
    tabsCloseCurrentHandle() {
      this.removeTabHandle(this.mainTabsActiveName);
    },

    // tabs, 关闭其它
    tabsCloseOtherHandle() {
      this.mainTabs = this.mainTabs.filter((item) => item.name === this.mainTabsActiveName);
    },

    // tabs, 关闭全部
    tabsCloseAllHandle() {
      this.mainTabs = [];
      // this.$router.push({ name: '健康中心' })
    },

    closePop() {
      this.visible = false;
    },
  },
};
</script>
<style lang="scss">
.news-info {
  position: absolute;
  top: 4.9vh;
  right: 0px;
  z-index: 999999;
  height: 800px;
}
.site-content {
  position: relative;
  // height: calc(100% - 20px);
  height: calc(100% - 0.6% - 6.2vh);
  border-radius: 0.5vw;

  .tab-top {
    position: absolute;
    height: 0.5vh;
    background: #2b2e33;
    width: 100%;
  }
  .right-info-box {
    position: absolute;
    right: 0;
    width: 28%;
    // background: #2e78ff;
    height: 4.8vh;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    border-bottom: #2b2e33 2px solid;
    padding-right: 20px;
    .ring-icon {
      width: 25px;
      height: 25px;
      margin-left: 20px;
      margin-right: 10px;
      cursor: pointer;
      color: #ffffff;
      svg {
        width: 25px;
        height: 25px;
        cursor: pointer;
      }
    }
    .line-name {
      font-size: 20px;
      color: #fff;
      //   font-weight: bold;
      margin-right: 15px;
    }
    .num-text {
      font-size: 38px;
      color: #2e78ff;
      font-family: unidreamLED;
      //   text-decoration: underline;
    }
    .nor-text {
      font-size: 16px;
      color: #fff;
      margin-left: 10px;
    }
  }

  // 加宽页签内边距-用于放右边按钮和页签功能按钮
  .el-tabs__nav-wrap.is-scrollable {
    // margin-right: 300px;
    padding-left: 20px;
  }
  // .el-tabs__header {
  //   width: 70%;
  // }

  // 左边/右边的按钮-页签超过当前宽度
  .el-tabs__nav-next,
  .el-tabs__nav-prev {
    font-size: 1.5rem;
  }

  // .el-tabs__nav-next {
  // right: 280px;
  // }

  // .el-tabs__nav-wrap {
  // padding-left: 0 !important;
  // }

  .el-card {
    height: 100%;
    border-radius: 0;
    border: none;
    background-color: transparent;
  }

  .el-tabs > .el-tabs__header {
    margin: 0;
    width: 100%;
  }

  .el-tabs__content {
    height: calc(100% - 5vh);
  }

  .el-card__body {
    padding: 0;
    height: 100%;
  }

  .el-tabs__item {
    height: 100%;
    line-height: 40px;
    font-size: 14px;
    width: 120px;
    padding: 0;
    text-align: center;
    color: #bdbdbd;
    z-index: 999;
  }

  /*悬浮显示关闭按钮时，左右对称的左右*/

  .el-tabs {
    height: 100%;

    .is-active {
      color: #ffffff;
      // font-size: 1.05rem;
    }
  }

  .el-tab-pane {
    height: 100%;
  }

  .el-tabs__nav-wrap {
    padding-left: 0.5vw;
    height: 100%;
  }

  .el-tabs__nav-scroll {
    height: 100%;
  }

  .el-tabs__nav {
    height: 100%;
    padding: 0 0 0 1px;
  }

  .el-dropdown {
    position: absolute;
    top: 10px;
    right: 20px;
    z-index: 999;
    font-size: 14px;
  }

  // el-dropdown鼠标悬浮框的位置，是el-dropdown的font-size的一半
  .el-icon--right {
    margin-left: 0.5rem;
  }

  .el-tabs__nav-wrap::after {
    // background: #2b2e33;
  }
}

.el-card-div {
  width: 100%;
  height: 100%;
  /*overflow: auto;*/
  color: #666;
}

.el-tabs__item.is-active {
  color: #666;
}

.el-tabs__active-bar {
  background-color: #2e78ff;
  height: 100%;
  width: 100%;
  border-top-left-radius: 0.3vw;
  border-top-right-radius: 0.3vw;
}
// .tabs-box {
//   .el-tabs__nav-scroll {
//     padding-right: 300px;
//   }
// }
.site-tabs__tools {
  position: absolute;
}
// 报警级别的颜色
$color-alarm0: #099130;
$color-alarm1: #c21520;
$color-alarm2: #df6400;
$color-alarm3: #ebb00e;
$color-alarm4: #da4992;
$color-alarm5: #10dd95;

// 一级报警dialog
.alarm-dialog1 {
  .el-dialog__header {
    background: $color-alarm1;
  }

  .el-dialog__title:before {
    content: '\e645';
    background: #f63541;
  }
}

// 二级报dialog
.alarm-dialog2 {
  .el-dialog__header {
    background: $color-alarm2;
  }

  .el-dialog__title:before {
    content: '\e645';
    background: #ff943e;
  }
}

// 三级报dialog
.alarm-dialog3 {
  .el-dialog__header {
    background: $color-alarm3;
  }

  .el-dialog__title:before {
    content: '\e645';
    background: #ffcd45;
  }
}

.notice-content {
  min-height: 200px;
  position: relative;
  display: flex;
  flex-direction: column;
  .more {
    color: #2e78ff;
    position: absolute;
    bottom: 10px;
    right: 10px;
    cursor: pointer;
  }
  .time {
    margin-top: 20px;
  }
}

.el-radio-button__inner {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
  background: #2b2e33;
  border: 0px solid #dcdfe6;
  font-weight: 500;
  border-left: 0;
  color: #fff;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  position: relative;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 0;
}
.el-radio-button:first-child .el-radio-button__inner {
  border-left: 0px solid #dcdfe6;
  border-radius: 4px 0 0 4px;
  box-shadow: none !important;
}
.single-spa-BDMS400 .el-radio-button__inner {
  color: #fff;
}

@-webkit-keyframes fadeInOut {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
}
.trans_fade_image {
  position: absolute;
  -webkit-animation-name: fadeInOut;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 1.5s;
}
.pst-a {
  position: absolute;
}
</style>
